<template>
  <div class="container">
    <vue-cropper
      class="cropper_view"
      ref="cropper"
      :img="option.img"
      :output-size="option.size"
      :output-type="option.outputType"
      :info="false"
      :full="option.full"
      :fixed="fixed"
      :fixed-number="fixedNumber"
      :can-move="option.canMove"
      :can-move-box="option.canMoveBox"
      :fixed-box="option.fixedBox"
      :original="option.original"
      :auto-crop="option.autoCrop"
      :auto-crop-width="option.autoCropWidth"
      :auto-crop-height="option.autoCropHeight"
      :center-box="option.centerBox"
      :high="option.high"
      mode="contain"
      :max-img-size="option.max" />

    <div class="footer">
      <div class="footer_top">
        <svg
          @click="goBack"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none">
          <path d="M6 6L18 18" stroke="white" stroke-width="1.5" stroke-linecap="round" />
          <path d="M6 18L18 6" stroke="white" stroke-width="1.5" stroke-linecap="round" />
        </svg>
        <UpLoadImg @upLoadImg="upLoadImg">
          <div class="reupload">Reupload</div>
        </UpLoadImg>
        <svg
          @click="startCrop"
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none">
          <path d="M4.5 12L9.5 17" stroke="white" stroke-width="1.5" stroke-linecap="round" />
          <path d="M9.5 17L19.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" />
        </svg>
      </div>
      <div class="footer_bottom">
        <svg
          @click="rotateImg('left')"
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
          fill="none">
          <path
            d="M6 11.0005C4.34326 11.0006 3 12.3437 3 14.0005V27.0005C3.00026 28.657 4.34342 30.0004 6 30.0005H23C24.6567 30.0005 25.9997 28.6571 26 27.0005V14.0005C26 12.3436 24.6569 11.0005 23 11.0005H6ZM23 13.0005C23.5523 13.0005 24 13.4482 24 14.0005V27.0005C23.9997 27.5525 23.5521 28.0005 23 28.0005H6C5.44799 28.0004 5.00026 27.5525 5 27.0005V14.0005C5 13.4483 5.44783 13.0006 6 13.0005H23ZM19.707 2.29248C19.3165 1.90204 18.6835 1.90204 18.293 2.29248L15.293 5.29248C15.2471 5.33828 15.2062 5.38892 15.1699 5.44287C15.1378 5.49064 15.1109 5.54081 15.0879 5.59229C15.0714 5.629 15.0569 5.66667 15.0449 5.70557C15.0378 5.72881 15.0318 5.75227 15.0264 5.77588C15.0098 5.84804 15 5.9233 15 6.00049C15 6.0754 15.0097 6.14806 15.0254 6.21826C15.0311 6.24383 15.0372 6.26929 15.0449 6.29443C15.057 6.33376 15.0722 6.3716 15.0889 6.40869C15.0973 6.42752 15.1046 6.44695 15.1143 6.46533C15.1295 6.49435 15.1467 6.52258 15.165 6.55029C15.1664 6.5524 15.1685 6.55405 15.1699 6.55615C15.1775 6.56742 15.1854 6.57842 15.1934 6.58936C15.2036 6.60337 15.2135 6.61776 15.2246 6.63135C15.2458 6.65735 15.2687 6.68327 15.293 6.70752L18.293 9.70752C18.6834 10.0977 19.3166 10.0977 19.707 9.70752C20.0975 9.31708 20.0973 8.684 19.707 8.29346L18.4141 7.00049H22C25.3137 7.00049 28 9.68678 28 13.0005V14.0005C28.0002 14.5526 28.4478 15.0005 29 15.0005C29.5522 15.0005 29.9998 14.5526 30 14.0005V13.0005C30 8.58221 26.4183 5.00049 22 5.00049H18.4131L19.707 3.70654C20.0975 3.31601 20.0975 2.68298 19.707 2.29248Z"
            fill="#AAAAAA" />
        </svg>
        <div @click="setFixNum(1)">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="32"
            height="32"
            viewBox="0 0 32 32"
            fill="none">
            <path
              d="M27 6C28.6567 6.00013 30 7.34323 30 9V23C30 24.6568 28.6567 25.9999 27 26H5C3.34315 26 2 24.6569 2 23V9C2 7.34315 3.34315 6 5 6H27ZM5 8C4.44772 8 4 8.44772 4 9V23C4 23.5523 4.44772 24 5 24H27C27.5522 23.9999 28 23.5522 28 23V9C28 8.4478 27.5522 8.00013 27 8H5ZM8 20H10V22H7.0498C6.47006 21.9999 6.00011 21.5299 6 20.9502V18H8V20ZM26 20.9502C25.9999 21.5299 25.5299 21.9999 24.9502 22H22V20H24V18H26V20.9502ZM10 12H8V14H6V11.0498C6.00011 10.4701 6.47006 10.0001 7.0498 10H10V12ZM24.9502 10C25.5299 10.0001 25.9999 10.4701 26 11.0498V14H24V12H22V10H24.9502Z"
              :fill="activeFixed === 1 ? '#F6892A' : '#AAAAAA'" />
          </svg>
          <div :class="activeFixed === 1 && 'active_color'">3:2</div>
        </div>
        <svg
          @click="rotateImg('right')"
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 32 32"
          fill="none">
          <path
            d="M26 11.0007C27.6567 11.0009 29 12.344 29 14.0007V27.0007C28.9997 28.6573 27.6566 30.0006 26 30.0007H9C7.34331 30.0007 6.00026 28.6574 6 27.0007V14.0007C6 12.3439 7.34315 11.0007 9 11.0007H26ZM9 13.0007C8.44772 13.0007 8 13.4484 8 14.0007V27.0007C8.00026 27.5528 8.44788 28.0007 9 28.0007H26C26.552 28.0006 26.9997 27.5527 27 27.0007V14.0007C27 13.4485 26.5522 13.0009 26 13.0007H9ZM12.293 2.29272C12.6835 1.90229 13.3165 1.90229 13.707 2.29272L16.707 5.29272C16.7529 5.33852 16.7938 5.38916 16.8301 5.44312C16.8622 5.49089 16.8891 5.54105 16.9121 5.59253C16.9286 5.62924 16.9431 5.66691 16.9551 5.70581C16.9622 5.72905 16.9682 5.75251 16.9736 5.77612C16.9902 5.84829 17 5.92355 17 6.00073C17 6.07564 16.9903 6.1483 16.9746 6.21851C16.9689 6.24407 16.9628 6.26954 16.9551 6.29468C16.943 6.334 16.9278 6.37185 16.9111 6.40894C16.9027 6.42776 16.8954 6.4472 16.8857 6.46558C16.8705 6.49459 16.8533 6.52282 16.835 6.55054C16.8336 6.55265 16.8315 6.5543 16.8301 6.5564C16.8225 6.56767 16.8146 6.57866 16.8066 6.5896C16.7964 6.60362 16.7865 6.618 16.7754 6.63159C16.7542 6.65759 16.7313 6.68352 16.707 6.70776L13.707 9.70776C13.3166 10.098 12.6834 10.098 12.293 9.70776C11.9025 9.31732 11.9027 8.68425 12.293 8.2937L13.5859 7.00073H10C6.68629 7.00073 4 9.68702 4 13.0007V14.0007C3.99981 14.5529 3.55217 15.0007 3 15.0007C2.44783 15.0007 2.00019 14.5529 2 14.0007V13.0007C2 8.58245 5.58172 5.00073 10 5.00073H13.5869L12.293 3.70679C11.9025 3.31626 11.9025 2.68323 12.293 2.29272Z"
            fill="#AAAAAA" />
        </svg>
        <!--        <div @click="setFixNum(2)">-->
        <!--          <svg-->
        <!--            :style="{ color: activeFixed === 2 ? '#F6892A' : '#AAAAAA' }"-->
        <!--            xmlns="http://www.w3.org/2000/svg"-->
        <!--            width="32"-->
        <!--            height="32"-->
        <!--            viewBox="0 0 32 32"-->
        <!--            fill="currentColor">-->
        <!--            <path d="M20 24V22H22V24.9502C21.9999 25.5299 21.5299 25.9999 20.9502 26H18V24H20Z" />-->
        <!--            <path d="M20.9502 6C21.5299 6.00011 21.9999 6.47006 22 7.0498V10H20V8H18V6H20.9502Z" />-->
        <!--            <path d="M12 22V24H14V26H11.0498C10.4701 25.9999 10.0001 25.5299 10 24.9502V22H12Z" />-->
        <!--            <path-->
        <!--              d="M10 7.04981C10.0001 6.47006 10.4701 6.00011 11.0498 6H14V8H12V10H10V7.04981Z" />-->
        <!--            <path-->
        <!--              fill-rule="evenodd"-->
        <!--              clip-rule="evenodd"-->
        <!--              d="M6 5C6.00013 3.34326 7.34323 2 9 2L23 2C24.6568 2 25.9999 3.34326 26 5L26 27C26 28.6569 24.6569 30 23 30H9C7.34315 30 6 28.6569 6 27L6 5ZM8 27C8 27.5523 8.44772 28 9 28H23C23.5523 28 24 27.5523 24 27L24 5C23.9999 4.44783 23.5522 4 23 4L9 4C8.4478 4 8.00013 4.44783 8 5L8 27Z" />-->
        <!--          </svg>-->
        <!--          <div style="margin-top: 3px" :class="activeFixed === 2 && 'active_color'">2:3</div>-->
        <!--        </div>-->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, nextTick, onUnmounted, watch } from 'vue';
  import imageCompression from 'browser-image-compression';
  import UpLoadImg from '@/views/activity/components/UpLoadImg.vue';
  import { blobToFile } from '@/utils/tools';
  import { showToast } from 'vant';
  import { useRouter } from 'vue-router';
  const router = useRouter();
  import { cropImageStore } from '@/store/cropImage';
  import { BaseAPI } from '@/api/base';
  import { ElLoading } from 'element-plus';
  const cropStore = cropImageStore();

  const cropper = ref<any>(null);
  const fixed = ref(true);
  const activeFixed = ref(1); // 1 3:2比例 2 2:3比例
  const fixedNumber = ref<any>([3, 2]); //裁剪比例
  const compressedUrl = ref<string>('');
  const option = ref({
    // img: 'https://avatars2.githubusercontent.com/u/15681693?s=460&v=4',
    img: '',
    size: 1,
    full: false,
    outputType: 'png',
    canMove: true,
    fixedBox: true,
    original: false,
    canMoveBox: true,
    autoCrop: true,
    // 只有自动截图开启 宽度高度才生效
    autoCropWidth: 750,
    autoCropHeight: 340,
    centerBox: true,
    high: true,
    max: 99999,
  });
  const rotateNum = ref<number>(0);

  watch(rotateNum, (newVal) => {
    if (newVal % 4 === 0) {
      cropper.value.refresh(option.value.img);
    }
  });

  onMounted(() => {
    // const screenWidth = screen.width;
    // option.value.autoCropWidth = screenWidth;
    // option.value.autoCropHeight = (screenWidth / 3) * 2;
    if (cropStore.upImage?.size) {
      upLoadImg({ blob: cropStore.upImage });
    }
  });

  onUnmounted(() => {
    if (compressedUrl.value) {
      URL.revokeObjectURL(compressedUrl.value);
    }
  });

  // 旋转图片
  const rotateImg = (rotate: 'left' | 'right') => {
    if (!option.value.img) return;
    rotateNum.value = rotate === 'left' ? rotateNum.value - 1 : rotateNum.value + 1;
    rotate === 'left' ? cropper.value.rotateLeft() : cropper.value.rotateRight();
  };

  // 开始截图
  const startCrop = () => {
    const loading = ElLoading.service({
      lock: true,
      text: 'Loading',
      background: 'rgba(0, 0, 0, 0.7)',
    });
    try {
      cropper.value.getCropBlob(async (data: any) => {
        // 定义图片压缩配置
        const compressionOptions = {
          maxSizeMB: 0.3, // 最大文件大小（MB）
          useWebWorker: true, // 使用Web Worker提高性能
        };
        const file = blobToFile(data);
        const compressedFile = await imageCompression(file, compressionOptions);
        const res: any = await BaseAPI.uploadOpsFile(blobToFile(compressedFile));
        if (res?.code === 200 && res?.data?.url) {
          loading.close();
          await router.push({
            path: '/activity/photoframe/create',
            query: { cropUrl: encodeURIComponent(res?.data?.url) },
          });
          return;
        }
        loading.close();
        showToast(res?.msg || 'error');
      });
    } catch (e) {
      console.log('eeee', e);
      loading.close();
    } finally {
    }
  };

  // 上传图片
  const upLoadImg = (data: any) => {
    option.value.img = window.URL.createObjectURL(data.blob);
  };

  // 设置裁剪比例
  const setFixNum = (num: number) => {
    if (num === fixedNumber.value) return;
    activeFixed.value = num;
    fixedNumber.value = num === 1 ? [3, 2] : [2, 3];
    cropper.value.refresh(option.value.img);
  };

  const goBack = () => {
    router.push('/activity/photoframe');
    // router.back();
  };
</script>

<style scoped lang="scss">
  .container {
    width: 100vw;
    height: 100vh;
    background: var(--80, rgba(0, 0, 0, 1));
  }
  .cropper_view {
    background: var(--80, rgba(0, 0, 0, 0.8));
    height: calc(100vh - 153px);
  }
  .footer {
    width: 100vw;
    position: fixed;
    bottom: 0;
  }
  .active_color {
    color: #f6892a;
  }
  .footer_top {
    width: 100%;
    height: 74px;
    border-radius: 8px 8px 0 0;
    background: var(---7, #404040);
    padding: 0 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .reupload {
    color: var(---0, #fff);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    padding-bottom: 2px;
    border-bottom: 1px solid var(---5, #aaa);
  }
  .footer_bottom {
    height: 79px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background: var(---9, #222);
    color: var(---5, #aaa);
    text-align: center;
    font-family: 'InterTight';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
</style>
